<template>
  <div class="main">
    <div class="body">
      <div class="add">
        <div class="bodyinfos">
          <div class="infoadd">学员管理</div>
          <div class="button">
            <div>
              <el-button @click="dialogFormVisible = true">添加学员</el-button>
            </div>
            <!-- 添加学员弹框 -->

            <el-dialog title="添加学员" v-model="dialogFormVisible">
              <el-form :model="formdata">
                <el-form-item label="学生姓名">
                  <el-input
                    v-model="formdata.name"
                    autocomplete="off"
                    style="width: 300px"
                  ></el-input>
                </el-form-item>
                <el-form-item label="联系方式">
                  <el-input
                    v-model="formdata.tel"
                    autocomplete="off"
                    style="width: 300px"
                  ></el-input>
                </el-form-item>
                <el-form-item label="性别">
                  <el-radio-group v-model="formdata.sex">
                    <el-radio label="0" >男</el-radio>
                    <el-radio label="1">女</el-radio>
                  </el-radio-group>
                </el-form-item>

                <el-form-item label="班级">
                  <el-select v-model="formdata.companyid" placeholder="班级">
                    <div v-for="item in classInfos">
                         <el-option :label="item.name" :value="item.courseid" ></el-option>
                    </div>
                 
                  </el-select>
                </el-form-item>

                <el-form-item label="出生日期">
                  <div class="block">
                    <el-date-picker
                      v-model="formdata.birthday"
                      type="date"
                      format='YYYY-MM-DD'
                      value-format="YYYY/MM/DD"
                      placeholder="选择日期"
                    >
                    </el-date-picker>
                  </div>
                </el-form-item>
                <el-form-item label="学员编号">
                  <el-input
                    v-model="formdata.num"
                    autocomplete="off"
                    style="width: 300px"
                  ></el-input>
                </el-form-item>
                <el-form-item label="备注">
                  <el-input
                    type="textarea"
                    v-model="formdata.remarks"
                    style="width: 300px"
                  ></el-input>
                </el-form-item>
                
              </el-form>
              <template #footer>
                <span class="dialog-footer">
                  <el-button @click="dialogFormVisible = false"
                    >取 消</el-button
                  >
                  <el-button type="primary" @click="infoAdd()">确 定</el-button>
                </span>
              </template>
            </el-dialog>
            <div>
              <el-button>添加排课</el-button>
            </div>
            <div>
              <el-button>删除</el-button>
            </div>
          </div>

          <div class="infoss">
            <div class="info">
              <div class="classInfo">
                <el-form :inline="true" :model="formInline">
                  <el-form-item class="classInfos">
                    <el-select
                      v-model="formInline.region"
                      placeholder="请选择"
                      size="mini"
                      :popper-append-to-body="false"
                    >
                      <div :model="classInfos" v-for="item in classInfos">
                        <el-option
                          :label="item.name"
                          :value="item.id"
                        ></el-option>
                      </div>
                    </el-select>
                  </el-form-item>
                </el-form>
                <div>
                  <input
                    type="text"
                    placeholder="请输入学员姓名"
                    v-model="queryInfo.name"
                  />
                </div>
                <div class="search" @click="getItemList">
                  <i class="el-icon-search"></i>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div style="margin-left: 20px" @mouseover="info()" @mouseout="hide()">
          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55"> </el-table-column>

            <el-table-column
              prop="name"
              width="280"
              label="姓名"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column prop="" label="姓别" width="280">
              <template v-slot:default="scope">
                 {{scope.row.sex==0?'男':'女'}}
              </template>
            </el-table-column>
            <el-table-column
              prop="stateName"
              width="280"
              label="状态"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column prop="yiPaicourses" label="购买总课时" width="280">
            </el-table-column>
            <el-table-column prop="yiShangcourses" label="剩余课时" width="180">
            </el-table-column>
            <el-table-column width="300px" label="操作" show-overflow-tooltip>
              <template #default="scope">
                <div v-show="showa == 1">
                  <el-button
                    type="primary"
                    round
                    size="mini"
                    @click="edit(scope.row.id)"
                    >修改</el-button
                  >
                  <el-button
                    type="danger"
                    round
                    size="mini"
                    @click="deletes(scope)"
                    >删除</el-button
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryInfo.page"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="queryInfo.psize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { defineComponent, ref } from "vue";
export default defineComponent({
  data() {
    return {
      // 日期
      // disabledDate(time) {
      //   return time.getTime() > Date.now();
      // },
      // shortcuts: [
      //   {
      //     text: "Today",
      //     value: new Date(),
      //   },
      //   {
      //     text: "Yesterday",
      //     value: (() => {
      //       const date = new Date();
      //       date.setTime(date.getTime() - 3600 * 1000 * 24);
      //       return date;
      //     })(),
      //   },
      //   {
      //     text: "A week ago",
      //     value: (() => {
      //       const date = new Date();
      //       date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
      //       return date;
      //     })(),
      //   },
      // ],
      // value1: "",
      // value2: "",
      // shortcuts: [
      //   {
      //     text: "今天",
      //     value: new Date(),
      //   },
      //   {
      //     text: "昨天",
      //     value: (() => {
      //       const date = new Date();
      //       date.setTime(date.getTime() - 3600 * 1000 * 24);
      //       return date;
      //     })(),
      //   },
      //   {
      //     text: "一周前",
      //     value: (() => {
      //       const date = new Date();
      //       date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
      //       return date;
      //     })(),
      //   },
      // ],
      // value1: "",
      // value2: "",
      // value3: "",
      // defaultTime: new Date(2000, 1, 1, 12, 0, 0), // '12:00:00'
      // 分页
      total: 0,
      queryInfo: {
        page: 1,
        psize: 5,
        name: "",
      },
      //操作
      showa: "2",
      labelPosition: "left",
      //  首页搜索
      classInfos: "",
      dialogFormVisible: false,
      formdata: {
       birthday:'',
       companyid:'',
       name:'',
       num:'',
       remarks:'',
       sex:'',
       tel:''
      },
      form: {
        companyid: "",
        name: "",
      },
      formInline: {
        user: "",
        region: "",
      },

      input3: ref(""),
      select: ref(""),
      tableData: [],
      multipleSelection: [],
    };
  },
  created() {
    this.getItemList();
    // 班级搜索下拉
    this.classInfo();
  },
  methods: {
    // 添加
    async infoAdd() {
      // console.log(this.formdata)
      const {data : res} = await this.$http.post('http://www.eshareedu.cn/edusystems/api/students/add',this.formdata)
      console.log(res)
    },
    // 班级搜索下拉
    async classInfo() {
      const { data: res } = await this.$http.get(
        "http://www.eshareedu.cn/edusystems/api/classes/list",
      );
      this.classInfos = res.data.list;
    },
    // 控制操作按钮的显示跟隐藏
    info() {
      const self = this;
      self.showa = "1";
    },
    hide() {
      const self = this;
      self.showa = "2";
    },
    // 删除
    async deletes(scope) {
      const deletes = await this.$confirm(
        "此操作将永久删除该文件, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      if (deletes !== "confirm") {
        return this.$message.info("已取消删除");
      }
      const id = scope.row.id;
      const { data: res } = await this.$http.get(
        "http://www.eshareedu.cn/edusystems/api/students/delete?id=" + id
      );
      // console.log(res)
      if (res.errCode == 10000) {
        this.$message.success("删除成功"), this.getItemList();
      } else {
        this.$message.error("删除失败");
      }
    },
    // 分页
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.queryInfo.psize = val;
      this.getItemList();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.queryInfo.page = val;
      this.getItemList();
    },
    // 列表
    async getItemList() {
      const { data: res } = await this.$http.get(
        "http://www.eshareedu.cn/edusystems/api/students/list",
        { params: this.queryInfo }
      );
      this.tableData = res.data.list;
      this.total = res.data.counts;
    },

    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 修改赋值
    async edit(id) {
      // console.log(id);
      this.formdata.id = id;
      this.tableData.id;
    },
  },
});
</script>
<style>
.button {
  line-height: 50px;
  width: 280px;
  height: 40px;
  display: flex;
  margin: 0 20px 0 20px;
}
.infoadd {
  width: 100px;
  height: 50px;
  background-color: #fff;
  line-height: 50px;
  font-size: 16px;
  text-align: center;
}
.bodyinfos {
  width: 60%;
  display: flex;
}
.adda {
  margin: 0 auto;
}
.block {
  margin-left: 15px;
}
.classInfo {
  margin-left: 2%;
  height: 30px;
  display: flex;
  line-height: 50px;
  /* align-items: center; */
  border: 1px solid #ccc;
  background-color: #fff;
}
.classInfo div:nth-child(2) {
  line-height: 30px;
}
.classInfos {
  margin-top: -5px;
}
.search {
  width: 30px;
  height: 30px;
  font-size: 20px;
  cursor: pointer;
  line-height: 30px;
}
.info {
  display: flex;
  flex-direction: row;
  width: 450px;
  align-items: center;
  margin-top: 10px;
  margin-left: 30px;
}
.infoss {
  width: 25%;
}
</style>